<template>
	<div class="noteCard" :style="Selected === true?'background: #fff url(http://ife.baidu.com/2018/asset/common/img/elite_note_bg_69802ee.png) right bottom no-repeat;':''">
		<div class="title">{{title}}<span class="date">{{date | dateFormat}}</span></div>
		<div class="owner">作者 <router-link :to="{ path: '/unlogin' }"><a href="#/note">{{author}}</a></router-link><span class="line"></span> 课程 <router-link :to="{ path: '/unlogin' }"><a href="#/note">{{course}}</a></router-link></div>
		<p class="text">{{text}}</p>
		<div class="note-status">
			<i class="iconfont icon-yanjing" style="vertical-align: middle;margin-right:3px;"></i><span>{{situation[0]}}次浏览</span>
			<i class="iconfont icon-dianzan" style="vertical-align: middle;margin-right:3px;font-size: 16px;"></i><span>{{situation[1]}}赞</span>
			<i class="iconfont icon-pinglun" style="vertical-align: middle;margin-right:3px;font-size: 16px;"></i><span>{{situation[2]}}评论</span>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			title:String,
			author:String,
			course:String,
			courseId:Number,
			date:Number,
			text:String,
			situation:Array,
			Selected:Boolean
		},
		data(){
			return {
			}
		},
		created() {
			console.log(this.title)
		}
	}
</script>

<style scoped="scoped">
	.noteCard{
		box-sizing: border-box;
		padding: 1.875rem 2rem;
		max-width: 60.25rem;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		margin: 30px auto;
		background-color: white;
	}
	.noteCard .title{
		font-size: 1.625rem;
		    color: #262626;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    display: block;
			line-height: 2.25rem;
	}
	.noteCard .owner{
		width: 100%;
		margin: 1.125rem 0 .75rem;
		font-size: .75rem;
		color: #aeaeae;
	}
	.owner a{
		color: #38ba72 !important;
		height:20px;
		display: inline;
	}
	.line{
		display: inline-block;
		    height: .75rem;
		    width: 0;
		    margin: 0 .5625rem;
		    border-right: 1px solid rgba(151,151,151,.22);
		    vertical-align: middle;
	}
	.date{
		float: right;
		color: #aeaeae;
		font-size: .875rem;
	}
	.text{
		    font-size: .75rem;
		    color: #323232;
		    opacity: .8;
			white-space: normal;
			word-break: break-all;
			margin: 0 0 10px;
	}
	.note-status{
		line-height: 20px;
		color: #aeaeae;
		font-size: 13px;
	}
	.note-status span{
		margin-right:10px;
	}
</style>
